import type {
  TemplateButton,
  TemplateFormConfig,
  TemplateTableConfig,
} from '#/views/onlineDesign/designPage/template/type/type';

import { reactive } from 'vue';

import { message } from 'ant-design-vue';

/**
 * 定义Table默认生成参数
 */
export const tableConfig = reactive({
  // 查询表单配置
  selectFormConfig: {
    // 基础配置
    baseConfig: {
      showSelect: true,
      dictSelect: false,
      tableSelect: false,
      layout: 'horizontal',
      wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
      showCollapseButton: true,
      actionButtonsReverse: false,
      showDefaultActions: true,
      submitOnChange: false,
      submitOnEnter: false,
      commonConfig: {
        colon: true,
        labelWidth: 80,
      },
    } as TemplateFormConfig.SelectFormConfig,
    // 表单属性
    formOption: {} as TemplateFormConfig.FormComponentConfig,
  },
  // 表格配置
  tableConfig: {
    // 基础配置
    baseConfig: {
      showSerialNumber: true,
      showChoose: true,
      dict: {
        exist: false,
        dictCodes: [],
      },
    } as TemplateTableConfig.TableBaseConfig,
    // 操作按钮
    actionBtn: {
      buttons: [
        {
          type: 'primary',
          text: '新增',
          class: 'mr-2',
          handlerFun: handlerAdd,
          handlerFunName: 'handlerAdd',
          btnFunctionType: 'add',
        } as TemplateButton,
      ],
      tools: [
        {
          type: 'primary',
          text: '批量删除',
          danger: true,
          class: undefined,
          handlerFun: handlerBatchDel,
          handlerFunName: 'handlerBatchDel',
          btnFunctionType: 'batchDel',
        } as TemplateButton,
      ],
      action: [
        {
          type: 'link',
          text: '编辑',
          class: undefined,
          size: 'small',
          handlerFun: handlerEdit,
          handlerFunName: 'handlerEdit',
          btnFunctionType: 'edit',
        } as TemplateButton,
        {
          type: 'link',
          text: '删除',
          class: undefined,
          danger: true,
          size: 'small',
          handlerFun: handlerDel,
          handlerFunName: 'handlerDel',
          handlerWay: 'pop',
          btnFunctionType: 'del',
        } as TemplateButton,
      ],
    },
    // 列配置
    columns: [] as TemplateTableConfig.TableColumnsConfig,
  },
  // 表单配置
  formConfig: {
    // 基础配置
    baseConfig: {
      openFormType: 'modal',
      openFormWidth: '40',
      layout: 'horizontal',
      wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-2',
      commonConfig: {
        colon: true,
        labelWidth: 80,
        componentProps: {
          class: 'w-full',
        },
      },
      showDefaultActions: false,
      dict: false,
      table: false,
    } as TemplateFormConfig.FormConfig,
    // 表单属性
    formOption: {} as TemplateFormConfig.FormComponentConfig,
  },
});

// 默认的新增方法
async function handlerAdd(formModalApi, formDrawerApi, popupParams) {
  if (tableConfig.formConfig.baseConfig.openFormType === 'modal') {
    formModalApi.setData(popupParams);
    formModalApi.open();
  } else {
    formDrawerApi.open();
  }
}

// 默认的编辑方法
function handlerEdit() {
  message.success('handlerEdit');
}

// 默认的删除方法
function handlerDel(row) {
  message.success(`handlerDel-----${JSON.stringify(row)}`);
}

// 默认的批量删除方法
function handlerBatchDel() {
  message.success('handlerBatchDel');
}

// 默认方法
function defaultFun() {
  message.success('这是一个默认的方法,没有任何方法体');
}

/**
 * 重新加载按钮,按钮方法
 *  调用接口的前提是必须调用：config.updateTableConfig() 方法进行赋值
 */
export const generateLoadBtn = async (newData): TemplateButton => {
  tableConfig.tableConfig.actionBtn.buttons =
    newData.tableConfig.actionBtn.buttons.map((item) => {
      return item.btnFunctionType === 'add'
        ? {
            ...item,
            handlerFun: handlerAdd,
          }
        : {
            ...item,
            handlerFun: defaultFun,
          };
    });
  tableConfig.tableConfig.actionBtn.tools =
    newData.tableConfig.actionBtn.tools.map((item) => {
      return item.btnFunctionType === 'batchDel'
        ? {
            ...item,
            handlerFun: handlerBatchDel,
          }
        : {
            ...item,
            handlerFun: defaultFun,
          };
    });
  tableConfig.tableConfig.actionBtn.action =
    newData.tableConfig.actionBtn.action.map((item) => {
      return item.btnFunctionType === 'edit' || item.btnFunctionType === 'del'
        ? {
            ...item,
            handlerFun:
              item.btnFunctionType === 'edit' ? handlerEdit : handlerDel,
          }
        : {
            ...item,
            handlerFun: defaultFun,
          };
    });
};

// 更新 tableConfig 的函数
export async function updateTableConfig(newData) {
  // 将 newData 转换为响应式对象并替换 tableConfig
  Object.assign(tableConfig, reactive(newData));
  // 设置按钮方法
  await generateLoadBtn(newData);
}
